<template>
	<div>
		<!-- 材料信息 -->
		<div style="width: 100%;height: 15vh;background-color: #4142F4">
			<div style="color: #FFFFFF;font-weight: 700;font-size: 38rpx;margin-left: 10%;padding-top: 6%">
				出库
			</div>
		</div>
		<!-- 出库详细信息 -->
		<div id="issue_div1">
			<van-cell-group inset>
				<van-field v-model="material_name" name="材料名称" label="材料名称" :placeholder="material_name" readonly />
				<van-field v-model="material_model" name="规格型号" label="规格型号" :placeholder="material_model" readonly />
			</van-cell-group>
			<div>
				<van-field required v-model="issue_time" label="出库时间" placeholder="出库时间" @input="issue_time_input" />
			</div>
			<!-- 用料单位 -->
			<div @click="getSourceName()">
				<van-field required v-model="issue_company" label="用料单位" placeholder="用料单位" @input="issue_company_input" />
			</div>
			<!-- 生产厂家 -->
			<div @click="getManuName()">
				<van-field required v-model="issue_manu" label="批次" placeholder="批次" />
			</div>
			<!-- 使用部位 -->
			<div>
				<van-field v-model="issue_position" label="使用部位" placeholder="使用部位" @input="issue_position_input" />
			</div>
			<!-- 车牌识别 -->
			<div>
				<van-field v-model="issue_car" label="运输车牌" @input="issue_car_input">
					<van-button color="#4142F4" slot="button" size="small" type="info" custom-class="button"
						@click="upload1()">
						识别
					</van-button>
				</van-field>
			</div>
			<div class="opinion_div3">
				<div v-for="(item, i) in imgArr" :key="i" v-if="a" style="margin-left: 5px;margin-right: 20px;">
					<image :src="imgArr[i]" style="width: 70px;height: 70px;" @click="deleteimg(i)"></image>
				</div>
				<div @click="getImg">
					<image src="../../../static/opinion_add.png" style="width: 70px;height: 70px;"></image>
				</div>
			</div>
			<!-- 发料量 -->
			<div>
				<van-field required v-model="issue_num" label="发料量" placeholder="发料量" @input="issue_num_input" />
			</div>
			<!-- 领用人 -->
			<div>
				<van-field v-model="issue_user" label="领用人" placeholder="领用人" @input="issue_user_input" />
			</div>
			<!-- 出库备注 -->
			<div>
				<van-field v-model="issue_remarks" label="出库备注" placeholder="出库备注" @input="issue_remarks_input" />
			</div>
			<!-- 车辆照片 -->
			<div class="opinion_div1">
				<div style="font-size: 27rpx;margin-top: 5%;">
					车辆照片
				</div>
				<div v-for="(item, i) in imgArr1" :key="i" v-if="a1" style="margin-left: 5%;margin-right: 20px;">
					<image :src="imgArr1[i]" style="width: 70px;height: 70px;" @click="deleteimg1(i)"></image>
				</div>
				<div @click="getImg1" style="margin-left: 5%;">
					<image src="../../../static/opinion_add.png" style="width: 70px;height: 70px;"></image>
				</div>
				<div>
					<van-action-sheet :show="show1" :actions="actions" cancel-text="取消" @close="toggleActionSheet1"
						@cancel="toggleActionSheet1" @select="deleteyes1" />
				</div>
				<van-divider />
			</div>
			<!-- 材料照片 -->
			<div class="opinion_div1">
				<div style="font-size: 27rpx;margin-top: 5%;">
					材料照片
				</div>
				<div v-for="(item, i) in imgArr2" :key="i" v-if="a2" style="margin-left: 5%;margin-right: 20px;">
					<image :src="imgArr2[i]" style="width: 70px;height: 70px;" @click="deleteimg2(i)"></image>
				</div>
				<div @click="getImg2" style="margin-left: 5%;">
					<image src="../../../static/opinion_add.png" style="width: 70px;height: 70px;"></image>
				</div>
				<div>
					<van-action-sheet :show="show2" :actions="actions" cancel-text="取消" @close="toggleActionSheet2"
						@cancel="toggleActionSheet2" @select="deleteyes2" />
				</div>
				<van-divider />
			</div>
			<!-- 提交 -->
			<div style="padding-bottom: 10%;padding-top: 5%;">
				<van-button color="#4142F4" type="primary" block @click="materialIssue()">出库</van-button>
			</div>
		</div>
	</div>
</template>

<script>
	import { BaseUrl } from '@/util/util.js';
	const PrefixUrl = BaseUrl();
	let that;
	export default {
		data() {
			return {
				issue_manu: '',
				material_id: '',
				material_name: '',
				material_model: '',
				issue_time: '',
				issue_company: '',
				issue_position: '',
				issue_car: '',
				issue_num: '',
				imgArr: [],
				a: false,
				imgArr1: [],
				a1: false,
				imgArr2: [],
				a2: false,
				show: false,
				show1: false,
				show2: false,
				deleteid: '',
				deleteid1: '',
				deleteid2: '',
				uuid: '',
				material_num: '',
				issue_remarks: '',
				issue_user: '',
				actions: [{
					name: '删除'
				}],
				material_source: '',
			}
		},
		onLoad: function(option) {
			console.log(option)
			this.material_id = option.id;
			this.material_name = option.name;
			this.material_model = option.model;
			this.material_num = uni.getStorageSync("issue_manuNum");
			this.material_source = uni.getStorageSync("issue_wareSource");
			this.issue_manu = uni.getStorageSync("issue_manuName");
			this.issue_company = uni.getStorageSync("issue_sourecName");
		},
		created() {
			that = this;
			this.issue_time = this.format(new Date());
			this.issue_company = uni.getStorageSync("issue_sourecName");
			this.issue_manu = uni.getStorageSync("issue_manuName");
			this.material_num = uni.getStorageSync("issue_manuNum");
			this.material_source = uni.getStorageSync("issue_wareSource");
		},
		methods: {
			issue_time_input(event) {
				this.issue_time = event.detail;
			},
			issue_company_input(event) {
				this.issue_company = event.detail;
			},
			issue_position_input(event) {
				this.issue_position = event.detail;
			},
			issue_car_input(event) {
				this.issue_car = event.detail;
			},
			issue_num_input(event) {
				this.issue_num = event.detail;
			},
			issue_remarks_input(event) {
				this.issue_remarks = event.detail;
			},
			issue_user_input(event){
				this.issue_user = event.detail;
			},
			//格式化时间
			format(dat) {
				//获取年月日，时间
				var year = dat.getFullYear();
				var mon = (dat.getMonth() + 1) < 10 ? "0" + (dat.getMonth() + 1) : dat.getMonth() + 1;
				var data = dat.getDate() < 10 ? "0" + (dat.getDate()) : dat.getDate();
				var hour = dat.getHours() < 10 ? "0" + (dat.getHours()) : dat.getHours();
				var min = dat.getMinutes() < 10 ? "0" + (dat.getMinutes()) : dat.getMinutes();
				var seon = dat.getSeconds() < 10 ? "0" + (dat.getSeconds()) : dat.getSeconds();
				var newDate = year + mon + data + hour + min;
				return newDate;
			},
			getImg() {
				if (this.imgArr.length > 0) {
					uni.showToast({
						title: '只可上传一张',
						duration: 1500,
						mask: true,
						icon: 'none'
					})
					return;
				} else {
					let index = 0;
					uni.chooseImage({
						count: 1, //默认9
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album', 'camera'], //从相册选择
						success: function(res) {
							if (that.imgArr.length == 0) {
								that.a = true
								var tempFilePaths = res.tempFilePaths;
								for (var i = 0; i < tempFilePaths.length; i++) {
									that.imgArr[i] = tempFilePaths[i]
								}
							} else {
								that.a = false
								var tempFilePaths = res.tempFilePaths;
								for (var i = 0; i < tempFilePaths.length; i++) {
									that.imgArr[that.imgArr.length] = tempFilePaths[i]
								}
								that.a = true
							}
						}
					})
				}

			},
			getImg1() {
				if (this.imgArr1.length > 0) {
					uni.showToast({
						title: '只可上传一张',
						duration: 1500,
						mask: true,
						icon: 'none'
					})
					return;
				} else {
					let index = 0;
					uni.chooseImage({
						count: 1, //默认9
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album', 'camera'], //从相册选择
						success: function(res) {
							if (that.imgArr1.length == 0) {
								that.a1 = true
								var tempFilePaths = res.tempFilePaths;
								for (var i = 0; i < tempFilePaths.length; i++) {
									that.imgArr1[i] = tempFilePaths[i]
								}
							} else {
								that.a1 = false
								var tempFilePaths = res.tempFilePaths;
								for (var i = 0; i < tempFilePaths.length; i++) {
									that.imgArr1[that.imgArr1.length] = tempFilePaths[i]
								}
								that.a1 = true
							}
						}
					})
				}

			},
			getImg2() {
				if (this.imgArr2.length > 0) {
					uni.showToast({
						title: '只可上传一张',
						duration: 1500,
						mask: true,
						icon: 'none'
					})
					return;
				} else {
					let index = 0;
					uni.chooseImage({
						count: 1, //默认9
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album', 'camera'], //从相册选择
						success: function(res) {
							if (that.imgArr2.length == 0) {
								that.a2 = true
								var tempFilePaths = res.tempFilePaths;
								for (var i = 0; i < tempFilePaths.length; i++) {
									that.imgArr2[i] = tempFilePaths[i]
								}
							} else {
								that.a2 = false
								var tempFilePaths = res.tempFilePaths;
								for (var i = 0; i < tempFilePaths.length; i++) {
									that.imgArr2[that.imgArr2.length] = tempFilePaths[i]
								}
								that.a2 = true
							}
						}
					})
				}

			},
			deleteimg(i) {
				this.show = !this.show
				this.deleteid = i
			},
			deleteimg1(i) {
				this.show1 = !this.show1
				this.deleteid1 = i
			},
			deleteimg2(i) {
				this.show2 = !this.show2
				this.deleteid2 = i
			},
			toggleActionSheet() {
				this.show = !this.show
			},
			toggleActionSheet1() {
				this.show1 = !this.show1
			},
			toggleActionSheet2() {
				this.show2 = !this.show2
			},
			deleteyes() {
				this.imgArr.splice(this.deleteid, 1)
				if (this.imgArr.length == 0) {
					this.a = false
				}
			},
			deleteyes1() {
				this.imgArr1.splice(this.deleteid1, 1)
				if (this.imgArr1.length == 0) {
					this.a1 = false
				}
			},
			deleteyes2() {
				this.imgArr2.splice(this.deleteid2, 1)
				if (this.imgArr2.length == 0) {
					this.a2 = false
				}
			},
			// 上传车辆照片
			uploadCarPhoto(uuid) {
				wx.uploadFile({
					// 需要上传的地址
					url: 'https://www.cr12cz.cn/czscsms/up/upload',
					// filePath  需要上传的文件
					filePath: this.imgArr1[0],
					name: 'file',
					header: {
						'content-type': 'multipart/form-data'
					},
					formData: {
						userid: uni.getStorageSync("userid")
					},
					success: function(res1) {
						const url_data = JSON.parse(res1.data);
						uni.request({
							method: 'POST',
							url: PrefixUrl + '/materialPhoto/saveMaterialPhoto',
							data: {
								warehouse_id: uuid,
								flag: 1,
								photo_type: '车辆照片',
								photo_url: url_data.obj

							},
							header: {
								'content-type': 'application/x-www-form-urlencoded',
								'token': uni.getStorageSync('token')
							},
							success: (res) => {
								this.materials = res.data.obj;
							}
						});
					},
					fail: function(res2) {
						console.log(res2)
					}
				})
			},
			// 上传材料照片
			uploadMaterialPhoto(uuid) {
				wx.uploadFile({
					// 需要上传的地址
					url: 'https://www.cr12cz.cn/czscsms/up/upload',
					// filePath  需要上传的文件
					filePath: this.imgArr2[0],
					name: 'file',
					header: {
						'content-type': 'multipart/form-data'
					},
					formData: {
						userid: uni.getStorageSync("userid")
					},
					success: function(res1) {
						const url_data = JSON.parse(res1.data);
						uni.request({
							method: 'POST',
							url: PrefixUrl + '/materialPhoto/saveMaterialPhoto',
							data: {
								warehouse_id: uuid,
								flag: 1,
								photo_type: '材料照片',
								photo_url: url_data.obj

							},
							header: {
								'content-type': 'application/x-www-form-urlencoded',
								'token': uni.getStorageSync('token')
							},
							success: (res) => {
								this.materials = res.data.obj;
							}
						});
					},
					fail: function(res2) {
						console.log(res2)
					}
				})
			},
			upload1() {
				uni.showLoading({
					title: '识别中.....'
				});
				wx.uploadFile({
					// 需要上传的地址
					url: 'https://www.cr12cz.cn/czscsms/up/upload',
					// filePath  需要上传的文件
					filePath: this.imgArr[0],
					name: 'file',
					header: {
						'content-type': 'multipart/form-data'
					},
					formData: {
						userid: uni.getStorageSync("userid")
					},
					success: function(res1) {
						const url_data = JSON.parse(res1.data);
						// 显示上传信息
						uni.request({
							method: 'POST',
							url: 'https://api03.aliyun.venuscn.com/ocr/car-license',
							data: {
								pic: url_data.obj
							},
							header: {
								"Content-Type": "application/x-www-form-urlencoded; charset=utf-8",
								'Authorization': 'APPCODE ef6d2fd3878543a7820f0b90b5051838'
							},
							success: (res3) => {
								if (res3.data.data.number) {
									uni.hideLoading();
									that.issue_car = res3.data.data.number;

								}
							}
						})
					},
					fail: function(res2) {
						console.log(res2)
					}
				})
			},
			getSourceName() {
				uni.redirectTo({
					url: '/pages/material/issue/issue_source?id=' + this.material_id +
						'&name=' + this.material_name + '&model=' + this.material_model
				});
			},
			getManuName() {
				uni.redirectTo({
					url: '/pages/material/issue/issue_manu?id=' + this.material_id +
						'&name=' + this.material_name + '&model=' + this.material_model
				});
			},
			// uuid
			guuid() {
			    function S4() {
			        return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
			    }
			    return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
			},
			materialIssue(){
				console.log(this.issue_num)
				console.log(this.material_num)
				this.uuid = this.guuid();
				if(this.imgArr1.length > 0){
					this.uploadCarPhoto(this.uuid);
				}
				if(this.imgArr2.length > 0){
					this.uploadMaterialPhoto(this.uuid);
				}
				if (this.issue_num * 1 > this.material_num * 1){
					uni.showToast({
						title: '出库数量大于库存数量!',
						mask: true,
						icon: 'none'
					})
				}else{
					if (this.issue_company === '' || this.issue_num === '' || this.issue_manu === ''){
						uni.showToast({
							title: '有必填项未填写，请检查!',
							mask: true,
							icon: 'none'
						})
					}else{
						uni.request({
							method: 'POST',
							url: PrefixUrl + '/materialIssue/materialIssue',
							data: {
								id: this.uuid,
								material_id: this.material_id,
								issue_company: this.issue_company,
								issue_position:this.issue_position,
								issue_time:this.issue_time,
								issue_car:this.issue_car,
								issue_num:this.issue_num,
								issue_remarks: this.issue_remarks,
								issue_user: this.issue_user,
								up_user: uni.getStorageSync('username'),
								up_bdst: uni.getStorageSync('userbdst'),
								material_source: this.material_source,
								material_name: this.material_name,
								manu: this.issue_manu,
								model: this.material_model,
								batch: this.issue_manu
							},
							header: {
								'content-type': 'application/x-www-form-urlencoded',
								'token': uni.getStorageSync('token')
							},
							success: (res) => {
								if (res.data.obj){
									uni.navigateBack({
										delta: 1
									});
									uni.showToast({
										title: '出库成功!',
										mask: true,
										icon: 'none'
									})
								}
							}
						});
					}
					
				}
				
			},
			
		}
	}
</script>

<style>
	#issue_div1 {
		position: absolute;
		top: 8vh;
		width: 92%;
		height: 100vh;
		background-color: #FFFFFF;
		left: 4%;
		border-radius: 20rpx;
		padding-top: 5%;
	}

	.opinion_div3 {
		margin-left: 24%;
		width: 100%;
		display: flex;
	}
	
	.opinion_div1 {
		margin-left: 4.5%;
		width: 100%;
		display: flex;
	}
</style>
